<!-- 评论商品页面 -->
<template>
	<view class="center">
		<!-- 上传图片 -->
		<view class="goods-image">
			<view class="upload-Image" v-if="eva_img.length > 0" v-for="(item,index) in eva_img" :key="index">
				<image :src="item.imgUrl" mode="aspectFill" @click="previewImg(item.imgUrl)"></image>
				<image src="/static/images/delete.svg" mode="aspectFit" @click="deleteImg(index)"></image>
			</view>
			<view @click="uploadImg">
				<image src="/static/images/add-img.png" mode="aspectFill"></image>
			</view>
		</view>

		<!-- 评分 -->
		<view class="rate">
			<image :src="good_img" mode="aspectFill"></image>
			<text>综合评分</text>
			<uni-rate v-model="rate_value" allow-half @change="onChange" />
		</view>

		<!-- 评价内容 -->
		<textarea placeholder="请输入评价内容" :auto-focus='true' maxlength="200" cursor-spacing="50" v-model="eva_text" />

		<!-- 按钮 -->
		<view class="bottom-button-position back">
			<view class="bottom-button-style" @click="submit">提交评价</view>
		</view>

	</view>
</template>

<script setup>
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { ref, reactive, toRefs } from 'vue'
	import { FeedBack } from "@/public/package-js/feedBack.js"
	import { Upload } from "@/public/package-js/uploadImg.js"
	import {order_eva_index} from "@/public/package-js/passValue.js"

	const data = reactive({
		eva_text: '', // 评价内容
		eva_img: [], // 评价图片
		rate_value: 0, // 商品评分
		good_img: '', // 商品图片 
		eva_good: { goods_id: '', goods_index: 0, specs: [] }, // 评价的商品信息

	})
	const { eva_text, eva_img, good_img, rate_value } = toRefs(data)

	const onChange = (e) => {
		console.log("e", e);
		data.rate_value = e.value
	}

	// 接收上个页面的数据
	onLoad((event) => {
		const res = JSON.parse(event.data)
		// console.log("res",res);
		data.good_img = res.goods_image
		data.eva_good.goods_id = res.goods_id
		data.eva_good.goods_index = res.index
		data.eva_good.specs = res.specs
	})


	// 1、上传图片
	async function uploadImg() {
		if(data.eva_img.length<5){
			let local = await new Upload().image(5, "image") // 设置可以传九张图片
			local.forEach(item => {
				data.eva_img.push({ imgUrl: item.tempFilePath })
			})
		}else{
			new FeedBack("最多只能上传5张图片哦", "none").toast()
		}
	}

	// 2、预览图片
	function previewImg(imgUrl) {
		let imgArr = []
		data.eva_img.forEach(item => {
			imgArr.push(item.imgUrl)
		})
		new Upload().preview(imgUrl, imgArr)
	}

	// 3、删除图片
	function deleteImg(index) {
		uni.showModal({
			title: '提示',
			content: '确定删除该图片吗？',
			success: async function(res) {
				if (res.confirm) {
					// 删除图片
					data.eva_img.splice(index, 1)
					new FeedBack("删除成功", "success").toast()
				} else if (res.cancel) {
					new FeedBack("取消操作", "error").toast()
				}
			}
		});

	}

	// 4、提交评价
	import moment from 'moment'
	moment.locale('zh-cn');
	const db = wx.cloud.database()

	async function submit() {
		if (data.eva_text == '') {
			new FeedBack('请输入评价内容', 'error').toast()
			return false
		}else if(data.rate_value == 0){
			new FeedBack('您还没有选择星级评分', 'none').toast()
			return false
		}
		uni.showLoading({
			title: '提交中',
			mask: true
		})
		// 上传图片到云储存
		let image = []
		if (data.eva_img.length > 0) {
			let res = await new Upload().multiUpload(data.eva_img, "image")
			// console.log("res",res);
			// console.log("others",data.eva_img);
			image = res
		}
		const user = uni.getStorageSync('user_info') //取出本地缓存的用户信息
		let time = moment().utcOffset(8).format('YYYY-MM-DD')
		let obj = {
			avatarUrl: user.avatarUrl,
			nickName: user.nickName,
			eva_text: data.eva_text,
			goods_id: data.eva_good.goods_id,
			eva_image: image,
			time,
			rate: data.rate_value,
			specs: data.eva_good.specs
		}
		// console.log("obj",obj);
		try {
			await db.collection('goods_comment').add({ data: obj })
			uni.hideLoading()
			order_eva_index.value = data.eva_good.goods_index
			uni.navigateBack({
				delta: 1
			})
		} catch (err) {
			console.log(err)
			new FeedBack('提交失败', 'error').toast()
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f2f2f2;
	}

	.center {
		background-color: #FFFFFF;
		padding: 20rpx;
	}

	textarea {
		box-sizing: border-box;
		background-color: #FFFFFF;
		padding: 20rpx 10rpx 10rpx 10rpx;
		width: 100%;
		height: 350rpx;
		line-height: 1.5;
		margin-bottom: 20rpx;

		border-top: 1rpx solid lightgray;
	}

	.goods-image {
		display: flex;
		flex-wrap: wrap;
	}

	.goods-image view {
		width: calc(33.3% - 5rpx*2);
		height: 200rpx;
		margin: 5rpx;
	}

	.goods-image image {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 7rpx;
	}

	.upload-Image {
		position: relative;
	}

	.upload-Image image:nth-child(2) {
		width: 30rpx !important;
		height: 30rpx !important;
		position: absolute;
		top: 0;
		right: 0;
	}

	/* 综合评分 */
	.rate {
		margin: 30rpx 0;
		display: flex;
		align-items: center;

		&>image {
			width: 100rpx;
			height: 100rpx;
		}

		&>text {
			margin: 0 30rpx;
		}
	}

	.back {
		background-color: #f2f2f2 !important;
	}
</style>
